<template>
    <el-form ref="form" :model="curData" label-width="100px" :inline="true" status-icon>
        <el-form-item label="用户名:" prop="userName">
            {{curData.userName}}
        </el-form-item>
        <el-form-item label="昵称:" prop="nickName">
            {{curData.nickName}}
        </el-form-item>
        <el-form-item label="部门:" prop="deptName">
            {{curData.deptName}}
        </el-form-item>
        <el-form-item label="用户类型:" prop="type">
            <span v-for="(item,index) in userTypes" :label="item.label" :value="+item.value"
                      :key="index" v-if="curData.type == item.value">{{item.label}}</span>
        </el-form-item>
        <el-form-item label="生日:" prop="birthday">
            {{curData.birthday}}
        </el-form-item>
        <el-form-item label="密码有效期:" prop="passwordValid">
            {{curData.passwordValid}}
        </el-form-item>
        <el-form-item label="性别:" prop="sex"  class = "formInline">
            <span v-for="(item,index) in userSexs" :label="item.label" :value="+item.value"
                  :key="index" v-if="curData.sex == item.value">{{item.label}}</span>
        </el-form-item>
        <el-form-item label="状态:" prop="enabled" size="small">
               <span v-for="(item,index) in enableds" :label="item.label" :value="+item.value"
                     :key="index" v-if="curData.enabled == item.value">{{item.label}}</span>
        </el-form-item>
        <el-form-item label="手机号:" prop="phone">
            {{curData.phone}}
        </el-form-item>
        <el-form-item label="邮箱:" prop="eamil">
            {{curData.eamil}}
        </el-form-item>
        <el-form-item label="关联角色:" prop="roleName" class="formBlock">
            {{curData.roleName}}
        </el-form-item>
        <el-form-item class="formBtn">
            <el-button type="info" @click="handleCancel" size="medium">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import detailMixin from '@/mixins/detail.mixin'
    import {mapState, mapActions} from 'vuex'
    export default {
        data() {
            return {
            };
        },
        mixins: [detailMixin],
        computed: {
            ...mapState('dic', ['userSexs','userTypes','enableds'])
        },
        methods: {
            ...mapActions('dic',['doUserTypesOfBasic','doUserSexsOfBasic','doEnabledOfBasic']),
        },
        mounted() {
            // 用户性别
            this.doUserSexsOfBasic(this.$appConstant.DIC_CODE.SYSTEM_SEX);
            // 用户状态
            this.doUserTypesOfBasic(this.$appConstant.DIC_CODE.SYSTEM_USERTYPE);
            // 数据字典启停状态
            this.doEnabledOfBasic(this.$appConstant.DIC_CODE.SYSTEM_ENABLED);
        }
    };
</script>
<style scoped lang="less">
    @import "../../../assets/css/common.less";
</style>
